<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_head(title, links)">
	<meta charset="UTF-8">
	<title th:replace="${title}">布局页面</title>
	<script src="../static/js/jquery-3.2.1.min.js" th:src="@{js/jquery-3.2.1.min.js}"></script>
	<script src="../static/js/semantic.js" th:src="@{js/semantic.js}"></script>
	<link rel="stylesheet" href="../static/css/semantic.css" th:href="@{/css/semantic.css}"/>
	<link rel="stylesheet" href="../static/css/icon.css" th:href="@{css/icon.css}"/>
	<link href="../static/css/ionicons.min.css" rel="stylesheet" th:href="@{css/ionicons.min.css}"/>
	<link rel="stylesheet" th:href="@{css/datatables.min.css}">
	<link href="../static/css/main.css" rel="stylesheet" th:href="@{css/main.css}"/>
	<link href="../static/css/pace.css" rel="stylesheet" th:href="@{css/pace.css}"/>
	<link href="../static/css/lobibox.css" rel="stylesheet" th:href="@{css/lobibox.css}"/>
	<style type="text/css">
		.icon-symbol {
			width: 2em; height: 2em;
			vertical-align: 0;
			fill: currentColor;
			overflow: hidden;
			margin: -1em 0.6em -0.5em 0;
		}
		.icon-symbol-scrolling {
			width: 2em; height: 2em;
			vertical-align: 0;
			fill: currentColor;
			overflow: hidden;
			margin: -1em 0 -0.5em 0;
		}
	</style>
	<th:block th:replace="${links}"></th:block>
</head>
<body>
<!--header start-->
<div id="contextWrap">
	<!--sidebar-->
	<div class="ui sidebar vertical left menu overlay  borderless visible sidemenu inverted  grey" data-color="grey"
		 th:fragment="left_menu">
		<a class="item logo" href="#">
			<img src="../static/images/logo.png" th:src="@{images/logo.png}" alt="whstone"/><img
				src="../static/images/thumblogo.png" th:src="@{images/thumblogo.png}" alt="whstone"
				class="displaynone"/>
		</a>
		<div class="ui accordion inverted">
            <a class="item" href="#" th:href="@{/dashboard}">
                <i class="dashboard titleIcon icon"></i>
				<span class="colhidden">仪表盘</span>
            </a>
			<div class="title item" href="#">
				<svg class="icon-symbol" aria-hidden="true">
					<use xlink:href="#icon-yewupingtaijiankong"></use>
				</svg>
				业务监控<i class="dropdown icon"></i>
			</div>
			<div class="content">
				<a class="item" href="#" th:href="@{/platformlist}">业务列表</a>
				<a class="item" href="#" th:href="@{/platformview}">业务方块</a>
				<a class="item" href="#" th:href="@{/platformdetail}">业务详情</a>
			</div>
			<div class="title item">
				<i class="server titleIcon icon"></i>
				设备监控<i class="dropdown icon"></i>
			</div>
			<div class="content">
				<a class="item" href="#" th:href="@{/overview}">设备总览</a>
                <a class="item" href="#">设备详情</a>
			</div>
			<div class="title item" href="#">
				<svg class="icon-symbol" aria-hidden="true">
					<use xlink:href="#icon-ic_view_carousel_px"></use>
				</svg>
				视图展示<i class="dropdown icon"></i>
			</div>
			<div class="content">
				<a class="item" href="#" th:href="@{/view}">监控视图</a>
				<a class="item" href="#" th:href="@{/carousel}" >轮播视图</a>
			</div>
			<div class="title item">
				<i class="alarm titleIcon icon"></i>
				问题管理<i class="dropdown icon"></i>
			</div>
			<div class="content">
				<a class="item" href="#" th:href="@{/problemlist}">问题列表</a>
				<a class="item" href="#" th:href="@{/calendar}">告警日历</a>
			</div>
			<div class="content">
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
            <span>仪表盘</span>
            <i class="dashboard icon"></i>
			<div class="menu">
                <a class="item" href="#" th:href="@{/dashboard}">仪表盘</a>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>业务概览</span>
			<svg class="icon-symbol-scrolling" aria-hidden="true">
				<use xlink:href="#icon-yewupingtaijiankong"></use>
			</svg>
			<div class="menu">
				<div class="header">
					业务概览
				</div>
                <div class="ui divider"></div>
                <a class="item" href="#" th:href="@{/platformlist}">业务列表</a>
                <a class="item" href="#" th:href="@{/platformview}">业务方块</a>
                <a class="item" href="#" th:href="@{/platformdetail}">业务详情</a>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>设备监控</span>
			<i class="server icon"></i>
			<div class="menu">
				<div class="header">
					设备监控
				</div>
				<div class="ui divider"></div>
                <a class="item" href="#" th:href="@{/overview}">设备总览</a>
				<a class="item" href="#">设备详情</a>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>视图展示</span>
			<svg class="icon-symbol-scrolling" aria-hidden="true">
				<use xlink:href="#icon-ic_view_carousel_px"></use>
			</svg>
			<div class="menu">
				<div class="header">视图展示</div>
				<div class="ui divider"></div>
				<a class="item" href="#" th:href="@{/view}">监控视图</a>
				<a class="item" href="#" th:href="@{/carousel}">轮播视图</a>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
            <span>问题管理</span>
			<i class="alarm icon"></i>
			<div class="menu">
				<div class="header">问题管理</div>
				<div class="ui divider"></div>
                <a class="item" href="#" th:href="@{/problemlist}">问题列表</a>
                <a class="item" href="#" th:href="@{/calendar}">告警日历</a>
			</div>
		</div>
		<div class="ui divider"></div>

	</div>

	<!--sidebar-->

	<div class="pusher">
		<!--navbar-->
		<div class="navslide navwrap" th:fragment="top_nav">
			<div class="ui menu icon borderless grid" data-color="inverted white">
				<a class="item labeled openbtn">
					<i class="ion-navicon-round big icon"></i>
				</a>
				<div class="item ui colhidden">
					<div class="ui icon input">
						<input type="text" placeholder="Search...">
						<i class="search icon"></i>
					</div>
				</div>
				<div class="right menu colhidden">
					<!--<div class="ui dropdown item labeled icon">
						<i class="bell icon"></i>   告警
						<div class="ui red label mini circular">6</div>
						<div class="menu" >
							<div class="header">
								紧急告警
							</div>
							<div class="item">
								告警信息1……
								<div class="ui teal left pointing label">1</div>
							</div>
							<div class="item">
								告警信息2……
								<div class="ui label">51</div>
							</div>
							<div class="item">
								告警信息3……
								<div class="ui label">1</div>
							</div>
							<div class="header">
								严重告警
							</div>
							<div class="item">
								<i class="dropdown icon"></i>
								<span class="text">更多</span>
								<div class="menu">
									<div class="item">告警信息……</div>
									<div class="item">告警信息……</div>
								</div>
							</div>
						</div>
					</div>-->
					<div class="ui dropdown item">
						<img class="ui mini circular image" src="../static/images/0.jpg" th:src="@{images/鲸鱼.png}"
							 alt="label-image"/>
						<div class="menu">
							<a class="item" href="#" th:text="${session.userInfo.name}">whstone</a>
							<a class="item" href="mail.html" th:href="@{/logout}">注销</a>
						</div>
					</div>
					<a class="item labeled rightsidebar computer only">
						<i class="ion-wrench large icon"></i>工具
					</a>

				</div>
			</div>
		</div>
		<!--navbar-->
		<!--maincontent-->
		<div class="mainWrap navslide">
			<div class="ui equal width left aligned padded grid stackable">
				<!--Site Content-->
				<!--Site Content-->
			</div>
		</div>
		<!--maincontent-->
	</div>
</div>
<th:block th:fragment="bottom_script(scripts)">
	<script src="../static/js/js.cookie.js" th:src="@{js/js.cookie.js}"></script>
	<script src="../static/js/jquery.nicescroll.min.js" th:src="@{js/jquery.nicescroll.min.js}"></script>
	<script data-pace-options='{ "ajax": false }' src="../static/js/pace.js" th:src="@{js/pace.js}"></script>
	<script src="../static/js/main.js" th:src="@{js/main.js}"></script>
	<script src="../iconfont.js" th:src="@{js/iconfont.js}"></script>
    <th:block th:replace="${scripts}"></th:block>
</th:block>
</body>
</html>